<template>
  <div class="dashboard">
    <el-row :gutter="20" class="stats-row">
      <el-col :span="4">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon inventory">
              <el-icon><Box /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">1,234</div>
              <div class="stat-label">总库存商品</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon inbound">
              <el-icon><Upload /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">56</div>
              <div class="stat-label">待入库单</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon outbound">
              <el-icon><Download /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">89</div>
              <div class="stat-label">待出库单</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon operations">
              <el-icon><Operation /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">23</div>
              <div class="stat-label">进行中任务</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon warehouse">
              <el-icon><OfficeBuilding /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">12</div>
              <div class="stat-label">仓库数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon efficiency">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">98%</div>
              <div class="stat-label">作业效率</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="charts-row">
      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>库存趋势</span>
              <el-button type="text">查看详情</el-button>
            </div>
          </template>
          <div class="chart-placeholder">
            <el-icon class="chart-icon"><TrendCharts /></el-icon>
            <p>库存趋势图表</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>作业效率</span>
              <el-button type="text">查看详情</el-button>
            </div>
          </template>
          <div class="chart-placeholder">
            <el-icon class="chart-icon"><PieChart /></el-icon>
            <p>作业效率图表</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>出入库统计</span>
              <el-button type="text">查看详情</el-button>
            </div>
          </template>
          <div class="chart-placeholder">
            <el-icon class="chart-icon"><DataAnalysis /></el-icon>
            <p>出入库统计图表</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="tables-row">
      <el-col :span="8">
        <el-card class="table-card">
          <template #header>
            <div class="card-header">
              <span>最近入库</span>
              <el-button type="text">查看全部</el-button>
            </div>
          </template>
          <el-table :data="recentInbound" stripe>
            <el-table-column prop="orderNo" label="入库单号" width="100" />
            <el-table-column prop="supplier" label="供应商" />
            <el-table-column prop="status" label="状态" width="70">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)" size="small">{{ row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="100" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="table-card">
          <template #header>
            <div class="card-header">
              <span>最近出库</span>
              <el-button type="text">查看全部</el-button>
            </div>
          </template>
          <el-table :data="recentOutbound" stripe>
            <el-table-column prop="orderNo" label="出库单号" width="100" />
            <el-table-column prop="customer" label="客户" />
            <el-table-column prop="status" label="状态" width="70">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)" size="small">{{ row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="100" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="table-card">
          <template #header>
            <div class="card-header">
              <span>待处理任务</span>
              <el-button type="text">查看全部</el-button>
            </div>
          </template>
          <el-table :data="pendingTasks" stripe>
            <el-table-column prop="taskNo" label="任务编号" width="100" />
            <el-table-column prop="type" label="任务类型" />
            <el-table-column prop="priority" label="优先级" width="70">
              <template #default="{ row }">
                <el-tag :type="getPriorityType(row.priority)" size="small">{{ row.priority }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="100" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 最近入库数据
const recentInbound = ref([
  { orderNo: 'IN001', supplier: '供应商A', status: '已完成', createTime: '2024-01-15' },
  { orderNo: 'IN002', supplier: '供应商B', status: '进行中', createTime: '2024-01-15' },
  { orderNo: 'IN003', supplier: '供应商C', status: '待处理', createTime: '2024-01-14' },
  { orderNo: 'IN004', supplier: '供应商D', status: '已完成', createTime: '2024-01-14' },
  { orderNo: 'IN005', supplier: '供应商E', status: '已完成', createTime: '2024-01-13' }
])

// 最近出库数据
const recentOutbound = ref([
  { orderNo: 'OUT001', customer: '客户A', status: '已完成', createTime: '2024-01-15' },
  { orderNo: 'OUT002', customer: '客户B', status: '进行中', createTime: '2024-01-15' },
  { orderNo: 'OUT003', customer: '客户C', status: '待处理', createTime: '2024-01-14' },
  { orderNo: 'OUT004', customer: '客户D', status: '已完成', createTime: '2024-01-14' },
  { orderNo: 'OUT005', customer: '客户E', status: '已完成', createTime: '2024-01-13' }
])

// 待处理任务数据
const pendingTasks = ref([
  { taskNo: 'T001', type: '拣货任务', priority: '高', createTime: '2024-01-15' },
  { taskNo: 'T002', type: '上架任务', priority: '中', createTime: '2024-01-15' },
  { taskNo: 'T003', type: '盘点任务', priority: '低', createTime: '2024-01-14' },
  { taskNo: 'T004', type: '移库任务', priority: '高', createTime: '2024-01-14' },
  { taskNo: 'T005', type: '补货任务', priority: '中', createTime: '2024-01-13' }
])

// 获取状态类型
const getStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    '已完成': 'success',
    '进行中': 'warning',
    '待处理': 'info'
  }
  return statusMap[status] || 'info'
}

// 获取优先级类型
const getPriorityType = (priority: string) => {
  const priorityMap: Record<string, string> = {
    '高': 'danger',
    '中': 'warning',
    '低': 'info'
  }
  return priorityMap[priority] || 'info'
}
</script>

<style scoped>
.dashboard {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.stats-row {
  margin-bottom: 0;
}

.stat-card {
  height: 120px;
  border-radius: 16px;
  box-shadow: none;
  transition: none;
  border: none;
  backdrop-filter: none;
  background: transparent;
}


.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 24px;
  color: #fff;
  box-shadow: none;
  transition: none;
}


.stat-icon.inventory {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.inbound {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-icon.outbound {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-icon.operations {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-icon.warehouse {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.stat-icon.efficiency {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-label {
  font-size: 14px;
  color: #6c757d;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.charts-row {
  margin-bottom: 0;
  flex: 1;
}

.chart-card {
  height: 100%;
  min-height: 300px;
  border-radius: 16px;
  box-shadow: none;
  transition: none;
  border: none;
  backdrop-filter: none;
  background: transparent;
  display: flex;
  flex-direction: column;
}


.chart-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  background: transparent;
  border-radius: 0;
  border: none;
  transition: none;
  min-height: 200px;
}


.chart-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.tables-row {
  margin-bottom: 0;
  flex: 1;
}

.table-card {
  height: 100%;
  min-height: 400px;
  border-radius: 16px;
  box-shadow: none;
  transition: none;
  border: none;
  backdrop-filter: none;
  background: transparent;
  display: flex;
  flex-direction: column;
}


.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #495057;
  font-size: 16px;
}

.card-header span {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 响应式设计 - 保持全屏铺满 */
@media (max-width: 1200px) {
  .stats-row .el-col {
    margin-bottom: 16px;
  }
}

@media (max-width: 768px) {
  .dashboard {
    gap: 16px;
  }
  
  .stats-row .el-col {
    margin-bottom: 12px;
  }
  
  .charts-row .el-col {
    margin-bottom: 16px;
  }
  
  .tables-row .el-col {
    margin-bottom: 16px;
  }
}

@media (max-width: 480px) {
  .dashboard {
    gap: 12px;
  }
}
</style>
